import React, {useEffect, useMemo, useState} from 'react'
import {Form, Row, Col, Input, Select, TreeSelect, Cascader} from 'antd'
import {PageType} from '../constant'
import Styles from './index.less'
import {translateDataToTree} from '@/utils/common'
import {getAllCitysPermission, getCompany} from '@/service/common'
import {
	getKeyValueByType,
	getSubjectCompany,
} from '@/service/merchantCenter/clue'
import {createNoC} from '@/service/merchantCenter/channelRule'

interface BasicsType {
	pageType: string
	basicsForm: any
	detailRecord: Record<string, string>
	// eslint-disable-next-line react/require-default-props
	user?: any
	mainBodyId: string
	setMainBody: React.Dispatch<React.SetStateAction<string>>
	orgId: string
	setOrgId: React.Dispatch<React.SetStateAction<string>>
	setCityId: React.Dispatch<React.SetStateAction<string>>
	setSource: React.Dispatch<React.SetStateAction<string>>
	setName: React.Dispatch<React.SetStateAction<string>>
}

const {Option} = Select

// 申请部门与项目申请人
const deptAddUserNames = {
	label: 'name',
	value: 'id',
	key: 'id',
}

// 城市
const cityNames = {
	label: 'name',
	value: 'id',
	children: 'cityInfoList',
}

export function Basics({
	pageType,
	basicsForm,
	detailRecord,
	mainBodyId,
	setMainBody,
	orgId,
	setOrgId,
	setCityId,
	setSource,
	user,
	setName,
}: BasicsType) {
	const [clueNo, setClueNo] = useState('')
	const getDitchNo = () => {
		createNoC().then((res: any) => {
			if (res.data) {
				setClueNo(res.data)
			}
		})
	}

	useEffect(() => {
		getDitchNo()
	}, [])
	const initialValues = useMemo(() => {
		let data: any = {}
		if (pageType) {
			data = detailRecord

			data.source += ''
		} else {
			data = {clueNo}
		}
		setTimeout(() => basicsForm.resetFields(), 1)
		return data
	}, [detailRecord, clueNo])

	const [citysList, setCitysList] = useState<any[]>([])

	const [orgList, setOrgList] = useState([])

	const [subjectList, setSubjectList] = useState([])

	const [keysList, setKeysList] = useState([])

	const disabled = useMemo(() => pageType === 'detail', [pageType])

	// 根据主体id查询公司
	useEffect(() => {
		if (mainBodyId) {
			getCompany({merchantId: mainBodyId}).then((res: any) => {
				if (res?.success) {
					const data = res?.data
					res?.data?.forEach(
						(
							item: {disabled: boolean; type: any},
							index: number,
						) => {
							if (item.type !== 0) {
								data[index].disabled = true
							}
						},
					)
					const list = translateDataToTree(data)
					setOrgList(list as any)
				}
			})
		}
	}, [mainBodyId])
	// 根据公司id查询城市
	useEffect(() => {
		if (orgId) {
			getAllCitysPermission({permission: user?.permissionID, orgId}).then(
				(res: any) => {
					if (res?.success) {
						setCitysList(() => res.data)
					}
				},
			)
		}
	}, [orgId])

	const getSubjectFun = () => {
		getSubjectCompany().then((res: any) => {
			if (res.success && res.data?.success) {
				setSubjectList(res.data.data)
			}
		})
	}

	const getKeysFun = () => {
		getKeyValueByType({type: 'Clues_Sources'}).then((res: any) => {
			if (res.success) {
				setKeysList(res.data)
			}
		})
	}

	useEffect(() => {
		getSubjectFun()
		getKeysFun()
	}, [])

	const onCitysChange = (value: any, selectedOptions: any) => {
		if (value) {
			basicsForm.setFieldsValue({
				cityName: selectedOptions[selectedOptions.length - 1].name,
			})
			setCityId(selectedOptions[selectedOptions.length - 1].id)
		}
	}
	return (
		<div className={Styles.basics}>
			<div className={Styles.titleBox}>基础信息</div>
			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={basicsForm}
					disabled={pageType === PageType.Detail}
					initialValues={initialValues}>
					<Row>
						<Col span={8}>
							<Form.Item
								label="编号"
								name="clueNo"
								rules={[{required: true}]}>
								<Input placeholder="自动生成" disabled />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="线索名称"
								name="username"
								rules={[{required: true, max: 50}]}>
								<Input
									placeholder="请输入"
									disabled={disabled}
								/>
							</Form.Item>
						</Col>
						<Col> </Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item
								label="线索手机号"
								name="phone"
								rules={[
									{required: true},
									{
										pattern: /^[0-9]*$/,
										message: '请输入正确的线索手机号',
									},
									{max: 30},
								]}>
								<Input
									placeholder={disabled ? '' : '请输入'}
									disabled={disabled}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="微信号" name="wechatNo">
								<Input
									placeholder={disabled ? '' : '请输入'}
									disabled={disabled}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="身份证号"
								name="cardId"
								rules={[
									{
										pattern:
											/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
										message: '请输入正确的身份证',
									},
								]}>
								<Input
									placeholder={disabled ? '' : '请输入'}
									disabled={disabled}
								/>
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item
								label="来源"
								name="source"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									disabled={disabled}
									allowClear
									onChange={(value: any) => {
										setSource(value)
									}}>
									{keysList.map((item: any) => (
										<Option value={item?.value}>
											{item?.valueName}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>
						<Col span={8}> </Col>
						<Col span={8}> </Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item
								label="主体"
								name="subject"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									disabled={disabled}
									onChange={(value: any, option: any) => {
										setMainBody(value)
										setName('')
										basicsForm.setFieldsValue({
											orgId: undefined,
											cityId: undefined,
											subjectName: option?.children,
										})
									}}>
									{subjectList?.map((item: any) => (
										<Option value={item?.id}>
											{item?.merchantName}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>
						<Col span={0}>
							<Form.Item
								label="主体"
								name="subjectName"
								required
							/>
						</Col>
						<Col span={8}>
							<Form.Item
								label="所属公司"
								name="orgId"
								rules={[{required: true}]}>
								<TreeSelect
									showSearch
									style={{width: '100%'}}
									placeholder="请选择"
									disabled={disabled}
									fieldNames={deptAddUserNames}
									treeDefaultExpandAll
									treeData={orgList}
									onChange={(value: any, label: any) => {
										setOrgId(value)
										setName('')
										basicsForm.setFieldsValue({
											orgName: label?.join(','),
											cityId: undefined,
										})
									}}
								/>
							</Form.Item>
							<Form.Item name="orgName" required />
						</Col>
						<Col span={8}>
							<Form.Item
								label="城市"
								name="cityId"
								rules={[{required: true}]}>
								<Cascader
									fieldNames={cityNames}
									options={citysList}
									placeholder="请选择"
									disabled={disabled}
									onChange={(value, key) => {
										setName('')
										onCitysChange(value, key)
									}}
								/>
							</Form.Item>
							<Form.Item name="cityName" required />
						</Col>
					</Row>
					<Row>
						<Col span={24}>
							<Form.Item
								label="描述"
								name="description"
								rules={[{max: 200}]}>
								<Input.TextArea />
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}
